<template>
    <div>
        <div class="goodsindex">
            <!-- 搜索条件 -->
            <el-form ref="form" :model="queryInfo" >
            <el-row :gutter="20" class="goodsindex-queryInfo">
                <!-- 商品名称搜索 -->
                <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                    <el-select  class="goodsindex-queryInfo-li" v-model="queryInfo.role_id" filterable size="small" clearable placeholder="请选择角色">
                        <el-option
                                v-for="item in role_name"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                    <el-button type="primary" class="goodsindex-queryInfo-li" size="small"  @click="search()">搜索</el-button>
                </el-col>
                <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                    <el-button type="success" class="goodsindex-queryInfo-li" size="small" @click="addForm()">添加</el-button>
                </el-col>
            </el-row>
            </el-form>

            <!-- 检索结果 -->
            <el-row :gutter="20" class="goodsindex-list">
                <el-col :span="24">
                    <el-table
                            :data="tableData"
                            border
                            size='small'
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="序号"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="role_id"
                                label="角色id"
                                width="80">
                        </el-table-column>
                        <el-table-column
                            prop="is_delete_text"
                            label="状态"
                            width="80">
                        </el-table-column>
                        <el-table-column
                                prop="role_name"
                                label="角色名称"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="role_description"
                                label="功能描述"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                        >
                            <template  v-slot:default="scope">
                                <el-button type="text" size="small" @click="editForm(scope.$index,scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <!-- 分页 -->
            <el-row :gutter="20" class="goodsindex-list">
                <el-col :span="24" class="goodsindex-page-box">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryInfo.page"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="queryInfo.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="queryInfo.total">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>

        <RolesSaveView :visible-child.sync="visible" :childFrom="RoleForm" :role-id="roleId"></RolesSaveView>
    </div>

</template>

<script>
    import RolesSaveView from "@/views/roles/RolesSaveView";
    import { getBaseRoles,rolesAll } from "@/api/api.js";
    import {path} from "@/utils/path";
    export default {
        data(){
            return {
                visible:false,
                role_name:[],
                queryInfo:{
                    role_id:'',
                    page: 1 ,
                    pageSize: 10,
                    total:10
                },
                tableData: [],
                // 这是给子组件传递的参数
                RoleForm:{
                  role_id : -1,
                  role_name:'',
                  role_description:'',
                  is_delete:0
                },
                roleId:-1
            }
        },
        components:{
            RolesSaveView
        },
        methods:{
            handleSizeChange(pageSize){
                console.log('1',pageSize);
                this.roles([],this.queryInfo.page,pageSize);
            },
            handleCurrentChange(page){
                console.log('2',page);
                this.roles([],page,this.queryInfo.pageSize);
            },
            addForm(){
                this.visible = true;
            },
            editForm(index,value){
              console.log("value",value);
                this.visible = true;
              this.RoleForm = value;
              this.roleId   = value.role_id;
            },
            getBaseRoles(){
                getBaseRoles().then((res) =>{
                    if (res.code === 200){
                        let options = [
                            {
                                label: '',
                                value: ''
                            }
                        ];
                        this.$.each(res.data,(index,values)=>{
                            options.push({
                                label: values.role_id + '--' + values.role_name,
                                value:values.role_id
                            })
                        })
                        this.role_name = options;
                        console.log("this.role",this.role_name);
                    }
                }).catch(error =>{
                    this.$message({
                        type:'error',
                        message:error.message || 'Error'
                    });
                })
            },
            roles(data,page,pageSize){
                rolesAll(data,page,pageSize).then((res) =>{
                    if (res.code === 200){
                        // 这个分页的三条数据是为了防止分页器添加或者修改数据之后产生的bug,尤其是选择了多个分页条数之后
                        this.queryInfo.total = res.data.total;  //总和
                        this.queryInfo.page  = res.data.current_page; // current_page	当前页码
                        this.queryInfo.pageSize  = res.data.per_page;// per_page	每页条数

                        this.tableData = res.data.data;
                      this.tableData.forEach((item)=>{
                        item.is_delete == 0 ? (item.is_delete_text = '正常') : (item.is_delete_text = '禁用')
                      })
                      console.log("this.tableData",this.tableData);
                    }
                }).catch(error =>{
                    this.$message({
                        type:'error',
                        message:error.message || 'Error'
                    });
                })
            },
          search(){
            this.roles(this.queryInfo,this.queryInfo.page,this.queryInfo.pageSize);
          },
        },
        created() {
            this.roles([],this.queryInfo.page,this.queryInfo.pageSize);
            this.getBaseRoles();
        }
    }
</script>

<!--<style scoped>-->
<!--    .goodsindex{-->
<!--        width: 100%;-->
<!--        min-height: 100%;-->
<!--        padding: 15px;-->
<!--        box-sizing: border-box;-->
<!--    }-->
<!--    /* 搜索 */-->
<!--    .goodsindex-queryInfo{-->
<!--        margin-bottom: 10px;-->
<!--    }-->
<!--    .goodsindex-queryInfo-li{-->
<!--        width: 100%;-->
<!--        height: auto;-->
<!--    }-->
<!--    /* 列表 */-->
<!--    .goodsindex-list{-->
<!--        width: 100%;-->
<!--        height: auto;-->
<!--        margin-bottom: 20px;-->
<!--    }-->
<!--    /* 分页 */-->
<!--    .goodsindex-page-box{-->
<!--        width: 100%;-->
<!--        height: auto;-->
<!--        display: flex;-->
<!--        justify-content: flex-end;-->
<!--    }-->
<!--</style>-->